<template>
	<view class="content">
		<view class="uni-panel-c">
			<view class="uni-panel-top">
				<text class="uni-text-logo">全部学习记录</text>
				<text class="uni-text-count">{{accountName}}同学，你已累积学过 {{studyCount}} 个单词，继续加油!</text>
			</view>
			<view class="uni-panel-bottom">
				<view class="uni-panel-item">
					<image class="uni-image" src="/static/img/back.png" mode="widthFix" @click="clickBack"></image>
					<text class="uni-text-item">词汇包</text>
					<text class="uni-text-item">学习日期</text>
					<text class="uni-text-item">数量</text>
					<text class="uni-text-item">复习</text>
					<text class="uni-text-item">检测</text>
				</view>
				<view class="uni-panel">
					<view class="uni-panel-book" v-for="(item, index) in listWord" :key="index" v-if="!isEveryday||!item.isTodayStudy">
						<image class="uni-word-image" :src="apiUrl+item.image" mode="widthFix"></image>
						<text class="uni-text-word" >{{item.name}}</text>
						<text class="uni-text-word">{{item.gmt_create}}</text>
						<text class="uni-text-word">{{item.wordCount}}</text>
						<text class="uni-text-word" v-if="item.isTodayStudy" @click="clickWordItem(item)">已复习</text>
						<image class="uni-word-image" v-else src="../../static/img/icon_study.png" mode="widthFix" @click="clickWordItem(item)"></image>
						<image class="uni-word-image" src="../../static/img/icon_check.png" mode="widthFix" @click="clickExamItem(item)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getStudyWordList, formatDate } from '@/api/api.js';
	import store from "../../store";
	import { HTTP_REQUEST_URL } from '@/config/app.js';
	export default {
		mounted() {
		        // #ifdef APP-PLUS
		        plus.screen.lockOrientation('landscape');
		        // #endif
		    },
		data() {
			return {
				userId: 0,
				accountName: '',
				user_type: 0,
				studyCount: 0,
				listWord: [],
				apiUrl: HTTP_REQUEST_URL,
				isEveryday: false,
			}
		},
		onLoad(options) {
			this.isEveryday = options.isEveryday=='true';
			const userInfo = store.state.app.userInfo;
			if( userInfo){
				this.accountName = userInfo.nickname;
				this.userId = userInfo.id;
				this.user_type = userInfo.user_type;
			}
			let student = uni.getStorageSync('student_info');
			if( student){
				this.accountName = student.nickname;
				this.userId = student.id;
			}
		},
		onShow() {
			let that = this;
			let params = {user_id:this.userId, isEveryday:this.isEveryday};
			getStudyWordList(params).then(res => {
				if( 0 == res.code && res.data ){
					that.listWord = res.data.rows;
					for(let item of that.listWord){
						let words = item.words.split(',');
						that.studyCount += words.length;
						item.wordCount = words.length;
						item.gmt_create = formatDate(new Date(item.gmt_create))
					}
				}else{
					console.log(res)
				}					
			})
		},
		methods: {
			clickBack(){
				uni.navigateBack();
			},
			clickWordItem(item){
				let params = {user_id: this.userId, 
                                book_id: item.book_id, 
								study_id: item.id,
								isTodayStudy: item.isTodayStudy};
				let toParams = Object.keys(params)
					.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
					.join('&');
				uni.navigateTo({
					url: '/pages/studyex/index?' + toParams
				});
			},
			clickExamItem(item){
				let toParams = {book_id: item.book_id, 
								study_id: item.id,
								isCheck: true}
				let params = Object.keys(toParams)
					.map(key => `${key}=${encodeURIComponent(toParams[key])}`)
					.join('&');
				if( 2 <= this.user_type){
					uni.navigateTo({
						url: '/pages/studyex/index?' + params
					});
				}else{
					uni.navigateTo({
						url: '/pages/exam/index?' + params
					});
				}
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		background-image: url('../../static/img/bg.jpg');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.uni-panel-c {
		width: 90%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.uni-panel-top {
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.uni-image {
		width: 6%;
	}
	.uni-text-logo{
		color: white;
		font-size: 5vmin;
		text-align: center;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
	.uni-text-count{
		color: white;
		font-size: 4vmin;
		text-align: center;
	}
	
	.uni-panel-bottom {
		width: 100%;
		height: 80%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.uni-panel-item {
		background-color: #f5f7e2;
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.uni-text-item{
		font-size: 4vmin;
		color: royalblue;
		letter-spacing: 2rpx;
		margin: 0 2%;
		font-weight: bold;
	}
	
	.uni-panel {
		width:100%;
		height: 90%;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}
	
	.uni-panel-book {
		height: 18%;
		width: 100%;
		margin-top: 1%;
		background-color: white;
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.uni-panel-book-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.uni-word-image {
		width: 5%;
		margin: 0 1%;
	}
	
	.uni-text-word{
		font-size: 4vmin;
		color: black;
		font-weight: bold;
	}
	
</style>
